<div class="container">

    <div class="row">

        <div class="span6">

            <div class="widget">

                <div class="widget-header">

                    <h3>
                        <i class="icon-tasks"></i>
                        Create Message
                    </h3>

                    <div class="widget-actions">
                        <div class="btn-group" style="display: inline-block;">
                            <button id="create_coupon_btn" data-url="<?php echo $this->Html->url(array('action' => 'coupon_editor')); ?>" class="btn btn-small"><i class='icon-plus'></i> Send Message </button>
                        </div>
                    </div>

                </div> <!-- /.widget-header -->

                <div class="widget-content">
                    <form action="<?php echo $this->Html->url(array('action' => 'receive')); ?>" id="message_form" class="form form-horizontal">
                        <div class="control-group">
                            <label class="control-label">Short Code</label>
                            <div class="controls">
                                <input class="input-small" type="text" value="" name="code" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Sender No</label>
                            <div class="controls">
                                <input class="input-small" type="text" value="" name="send_no" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Message</label>
                            <div class="controls">
                                <textarea class="input-large" name="sms"></textarea>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <input class="btn" type="submit" value="Send Message" />
                        </div>
                    </form>
                </div> <!-- /.widget-content -->

            </div> <!-- /.widget -->

        </div> <!-- /.span6 -->

        <div class="span6">
            <div class="widget">
                <div class="widget-header">
                    <h3>Server Response</h3>
                </div>
                <div class="widget-content">
                    <div id="response_details"><p>Response details here</p></div>
                </div>
            </div>
        </div>

    </div> <!-- /.row -->

</div> <!-- /.container -->

<script>
$(document).ready(function() {
    $("#message_form").submit(function(e) {
       e.preventDefault() ;
       
       var url = $(this).attr('action');
       var query = $(this).serialize();
       
        $.ajax({
            url: url,
            data: query,
            type: 'post',
            success: function(data) {
                $("#response_details").html( data );
            },
            error: function(xhr) {
                $("#response_details").html(xhr.responseText);
            }
        });
    });
});
</script>